<template>
  <up-popup :show="show" mode="bottom" round="20" @close="handleClose" @open="handleOpen">
    <view class="payment-trend-popup">
      <!-- 弹窗头部 -->
      <view class="popup-header">
        <view class="header-title">缴费趋势图</view>
        <view class="close-btn" @click="handleClose">
          <up-icon name="close" size="20" color="#666"></up-icon>
        </view>
      </view>

      <!-- 月份选择器 -->
      <view class="month-selector">
        <view class="selector-item" @click="showMonthPicker">
          <text class="selector-text">{{ selectedMonth }}</text>
          <up-icon name="arrow-down" size="16" color="#666"></up-icon>
        </view>
      </view>

      <!-- 趋势图表 -->
      <view class="chart-container">
        <qiun-data-charts 
          type="column" 
          :opts="chartOpts" 
          :chartData="trendChartData" 
          :canvas2d="true"
          :canvasId="'paymentTrendChart'"
        />
      </view>

      <!-- 数据统计 -->
      <view class="data-summary">
        <view class="summary-item">
          <text class="summary-label">本月总缴费</text>
          <text class="summary-value">¥{{ totalAmount }}</text>
        </view>
        <view class="summary-item">
          <text class="summary-label">缴费次数</text>
          <text class="summary-value">{{ totalCount }}次</text>
        </view>
        <view class="summary-item">
          <text class="summary-label">日均缴费</text>
          <text class="summary-value">¥{{ avgAmount }}</text>
        </view>
      </view>
    </view>

    <!-- 月份选择器 -->
    <up-datetime-picker 
      :show="showDatePicker" 
      mode="year-month" 
      :value="currentDate"
      @confirm="onMonthConfirm" 
      @cancel="hideDatePicker"
      @close="hideDatePicker"
    ></up-datetime-picker>
  </up-popup>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'

interface Props {
  show: boolean
}

interface Emits {
  (e: 'close'): void
  (e: 'open'): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

// 日期相关
const currentDate = ref(new Date().getTime())
const showDatePicker = ref(false)

// 选中的月份显示
const selectedMonth = computed(() => {
  const date = new Date(currentDate.value)
  return `${date.getFullYear()}年${String(date.getMonth() + 1).padStart(2, '0')}月`
})

// 模拟数据 - 实际项目中应该从API获取
const mockData = ref([
  { date: '01', amount: 1200, count: 5 },
  { date: '02', amount: 800, count: 3 },
  { date: '03', amount: 1500, count: 7 },
  { date: '04', amount: 900, count: 4 },
  { date: '05', amount: 1800, count: 8 },
  { date: '06', amount: 1100, count: 6 },
  { date: '07', amount: 1300, count: 5 },
  { date: '08', amount: 1600, count: 7 },
  { date: '09', amount: 1000, count: 4 },
  { date: '10', amount: 1400, count: 6 },
  { date: '11', amount: 1700, count: 8 },
  { date: '12', amount: 1200, count: 5 },
  { date: '13', amount: 950, count: 4 },
  { date: '14', amount: 1350, count: 6 },
  { date: '15', amount: 1150, count: 5 },
  { date: '16', amount: 1450, count: 7 },
  { date: '17', amount: 1250, count: 6 },
  { date: '18', amount: 1550, count: 8 },
  { date: '19', amount: 1050, count: 4 },
  { date: '20', amount: 1750, count: 9 },
  { date: '21', amount: 1300, count: 6 },
  { date: '22', amount: 1100, count: 5 },
  { date: '23', amount: 1400, count: 7 },
  { date: '24', amount: 1200, count: 5 },
  { date: '25', amount: 1600, count: 8 },
  { date: '26', amount: 1000, count: 4 },
  { date: '27', amount: 1500, count: 7 },
  { date: '28', amount: 1300, count: 6 },
  { date: '29', amount: 1700, count: 8 },
  { date: '30', amount: 1400, count: 7 }
])

// 图表数据
const trendChartData = computed(() => {
  const categories = mockData.value.map(item => item.date + '日')
  const amounts = mockData.value.map(item => item.amount)
  
  return {
    categories,
    series: [{
      name: '缴费金额(元)',
      data: amounts
    }]
  }
})

// 图表配置
const chartOpts = ref({
  color: ['#4080FF'],
  padding: [15, 15, 0, 15],
  enableScroll: true,
  legend: {
    show: false
  },
  xAxis: {
    disableGrid: true,
    itemCount: 7,
    scrollShow: true
  },
  yAxis: {
    gridType: 'dash',
    dashLength: 2,
    data: [{
      min: 0,
      max: 2000
    }]
  },
  extra: {
    column: {
      type: 'group',
      width: 30,
      activeBgColor: '#000000',
      activeBgOpacity: 0.08,
      borderRadius: 4
    }
  }
})

// 统计数据
const totalAmount = computed(() => {
  return mockData.value.reduce((sum, item) => sum + item.amount, 0).toLocaleString()
})

const totalCount = computed(() => {
  return mockData.value.reduce((sum, item) => sum + item.count, 0)
})

const avgAmount = computed(() => {
  const total = mockData.value.reduce((sum, item) => sum + item.amount, 0)
  const avg = total / mockData.value.length
  return Math.round(avg).toLocaleString()
})

// 事件处理
const handleClose = () => {
  emit('close')
}

const handleOpen = () => {
  emit('open')
}

const showMonthPicker = () => {
  showDatePicker.value = true
}

const hideDatePicker = () => {
  showDatePicker.value = false
}

const onMonthConfirm = (e: any) => {
  currentDate.value = e.value
  showDatePicker.value = false
  // 这里可以根据选择的月份重新获取数据
  loadTrendData()
}

// 加载趋势数据
const loadTrendData = async () => {
  // 实际项目中这里应该调用API获取对应月份的数据
  console.log('加载趋势数据:', selectedMonth.value)
}

// 监听弹窗显示状态
watch(() => props.show, (newVal) => {
  if (newVal) {
    loadTrendData()
  }
})
</script>

<style scoped lang="scss">
.payment-trend-popup {
  background-color: #ffffff;
  border-radius: 20rpx 20rpx 0 0;
  padding: 0 0 40rpx 0;
  max-height: 80vh;
  overflow: hidden;
}

.popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx 30rpx 20rpx;
  border-bottom: 1rpx solid #f0f0f0;

  .header-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333333;
  }

  .close-btn {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #f8f8f8;
  }
}

.month-selector {
  padding: 20rpx 30rpx;
  
  .selector-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16rpx 24rpx;
    background-color: #f8f9fa;
    border-radius: 12rpx;
    border: 1rpx solid #e9ecef;
    
    .selector-text {
      font-size: 28rpx;
      color: #333333;
      margin-right: 8rpx;
    }
  }
}

.chart-container {
  padding: 20rpx 30rpx;
  height: 500rpx;
}

.data-summary {
  display: flex;
  justify-content: space-around;
  padding: 30rpx;
  background-color: #f8f9fa;
  margin: 0 30rpx;
  border-radius: 16rpx;

  .summary-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    
    .summary-label {
      font-size: 24rpx;
      color: #666666;
      margin-bottom: 8rpx;
    }
    
    .summary-value {
      font-size: 28rpx;
      font-weight: 600;
      color: #333333;
    }
  }
}
</style>